<template>
	<view class="container">
		<view class="meno-head">
			<!-- 状态栏的左侧 -->
			<view class="meno-head_left">
				<text class="active-text" :class="isClick?'active-text2':'active-text'" @tap="fetchData">全部</text>
				<text>{{menos.length}}条</text>
			</view>
			<!-- 状态栏的右侧 -->
			<view class="meno-head_right">
				<view class="meno-head_right-item0" :class="isClick1?'meno-head_right-item0':'meno-head_right-item3'" 
				@tap="fectchCompletedData" >已完成</view>
				<view class="meno-head_right-item1" :class="isClick2?'meno-head_right-item1':'meno-head_right-item3'" 
				@tap="fetchUncompletedData">未完成</view>
				<view class="meno-head_right-item2" :class="isClick3?'meno-head_right-item2':'meno-head_right-item3'" 
				@tap="fetchInProgressdDate">进行中</view>
			</view>
		</view>
		<view class="meno-content">
			<view v-for="meno in menos" :key="meno.meno_id" @tap="gotoInfo(meno.meno_id)">
			  <view class="item">
				<view>{{meno.title}}</view>
				<view class="right">
					<text v-if="meno.category == 0">旅行</text>
					<text v-if="meno.category == 1">学习</text>
					<text v-if="meno.category == 2">工作</text>
					<text v-if="meno.category == 3">购物</text>
					<text v-if="meno.category == 4">健康</text>
					<text v-if="meno.category == 5">无</text>
				</view>
			  </view>
			</view>
		</view>
		<view class="create-meno">
			<text class="iconfont icon-add" @tap="createMeno"></text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
		menos: [],
		// currentData:[],
		pageNum:1,
		isClick:false,
		isClick1:false,
		isClick2:false,
		isClick3:false,
		reminders:[],
		that: ''
    };
  },
  onLoad() {
	  this.fetchData();
  },
  methods: {
	  fetchData() {
		  uni.request({ 
			  url:"http://localhost:8080/meno/selectAll",//后端接口地址
			  method:'POST',
			  success: (res) => {
				  console.log(res.data);
				  this.menos = res.data;
				  this.isClick = true;
				  this.isClick1 = true;
				  this.isClick2 = true;
				  this.isClick3 = true;
			  }
		  });
	  },
	  gotoInfo(meno_id) {
		  uni.navigateTo({
		  	url:`/pages/showmenoinfo/showmenoinfo?meno_id=${meno_id}`//按页面获取
		  })
	  },
	  onReachBootom() {
		  this.pageNum += 1;
		  this.fetchData();
	},
	fectchCompletedData() {
		uni.request({
			  url:"http://localhost:8080/meno/selectStatus0",//后端接口地址
			  method:'POST',
			  success: (res) => {
				  console.log(res.data);
				  this.menos = res.data;
				  this.isClick = false;
				  this.isClick1 = false;
				  this.isClick2 = true;
				  this.isClick3 = true;
			  }
		});
	},
	fetchUncompletedData() {
		uni.request({
			  url:"http://localhost:8080/meno/selectStatus1",//后端接口地址
			  method:'POST',
			  success: (res) => {
				  console.log(res.data);
				  this.menos = res.data;
				  this.isClick = false;
				  this.isClick1 = true;
				  this.isClick2 = false;
				  this.isClick3 = true;
			  }
		});
	},
	fetchInProgressdDate() {
		uni.request({
			  url:"http://localhost:8080/meno/selectStatus2",//后端接口地址
			  method:'POST',
			  success: (res) => {
				  console.log(res.data);
				  this.menos = res.data;
				  this.isClick = false;
				  this.isClick1 = true;
				  this.isClick2 = true;
				  this.isClick3 = false;
			  }
		});
	},
	createMeno() {
		uni.navigateTo({
			url:"/pages/createmeno/createmeno"
		})
	},
	async fetchReminders() {
		uni.request({
			url:"http://localhost:8080/reminder/selectAllremind",
			method:'GET',
			success: (result) => {
				console.log("成功获取提醒时间表！");
				this.reminders = result.data;
				this.checkReminders();
			}
		})
	},
	checkReminders() {
		const interval = setInterval(() => {
			for(const reminder of this.reminders) {
				const now = new Date().getTime();
				const reminderTime = new Date(reminder.reminder_time).getTime();
				console.log(reminderTime);
				console.log("这是一个分界线");
				console.log(now);
				if(now >= reminderTime && now <= reminderTime + 3000) {
					uni.request({
						url:`http://localhost:8080/meno/getMeno?meno_id=${reminder.meno_id}`,
						success: (resu) => {
							console.log("获取成功id！");
							this.that = resu.data.title;
							// resu.data.title = '';
						}
					},1000);
					uni.showToast({
						title:this.that,
						icon:'success',
						duration:4000,
					});
					// that='';
					// clearInterval(interval);
				}
			}
		},1000);
	}
  },
  mounted() {
  	this.fetchReminders();
  }
};
</script>

<style>
	@import'../../common/icon.css';
	page{
		background-color: #ffe1af;
	}
	.container{
		background-color: #ffe1af;
		font-size: 18px;
	}
	.meno-head{
		display: flex;
		align-items: center;
		padding: 0 14px;
		height: 45px;
		color: #333333;
		box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 1);
		background: #FFFFFF;
		background-color: #ffe1af;
	}
	.active-text{
		padding-right: 10px;
	}
	.active-text2{
		color: #d24bff;
		padding-right: 10px;
	}
	
	.meno-head_left{
		width: 100%;
	}
	.meno-head_right{
		display: flex;
		flex-shrink: 0;
	}
	.meno-head_right-item0{
		padding: 0 5px;
	}
	.meno-head_right-item1{
		padding: 0 5px;
	}
	.meno-head_right-item2{
		padding: 0 5px;
	}
	.meno-head_right-item3{
		color: #d24bff;
		padding: 0 5px;
	}
	.meno-content {
		position: relative;
	}
	.create-meno{
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 20px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 50px;
		height: 50px;
/* 		border-radius: 50%;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255,255,255) inset ; */
	}
	.icon-add{
		font-size: 50px;
	}
	.list {
	  margin-bottom: 20px;
	}
	.item {
	  display: flex;
	  align-items: center;
	  flex-direction: row;
	  padding: 10px;
	  border-bottom: 1px solid #eeeeee;
	}
	.right {
		margin-left: auto;
	}
</style>